<template>
	<view id="vc" :style="warpHeight">
			<canvas v-for="(item,index) in drawElementsPageList" @click="ck($event)" :style="canvasHeightStype"  :canvas-id="`myCanvas${index}`" :id="`myCanvas${index}`">
				<view v-if="index == 0" style="text-align: center; margin-top: 10px;">二年级下第二单元试卷{{canvasWidth}}-{{canvasHeight}}</view>
				<view v-if="index==drawElementsPageList.length/2" style="text-align: center; margin-top: 10px;">二年级下第二单元试卷答案</view>
			</canvas>	
	</view>



</template>

<script>
	import DrawElementsSource from '@/utils/DrawElementsSource'
	import DrawElements from '@/utils/DrawElements'
	import DrawPageParams from '@/utils/DrawPageParams'
	import DrawElementsFactory from '@/utils/DrawElementsFactory'
	var context = uni.createCanvasContext('myCanvas');
	export default {
		data() {
			return {
				startTime: "2020",
				endTime: "2020",
				color:'red',
				canvasHeightStype:'',
				a4hStype:'',
				warpHeight:'',
				windowWidth:0,
				canvasWidth:0,
				canvasHeight:0,
				drawElementsPageList:[],
				clickEventList:[]
			}
		},
		methods:{
			ck(event){
				var x = event.detail.x
				var y = event.detail.y
				this.clickEventList.push({"x":x,"y":y})
				console.log(`鼠标在颜色块的坐标：${x} 和 ${y}`)
				const drawPageParams = new DrawPageParams()
				this.color = this.color == 'green'?'red':'green'
				
				drawPageParams.boxColor = this.color
				drawPageParams.boxType = 3
				drawPageParams.drawDataSource = DrawElementsSource.dataSource
				drawPageParams.canvasWidth = this.windowWidth - 20
				drawPageParams.canvasHeight = this.canvasHeight
				
				const drawElementsFactory = new DrawElementsFactory(drawPageParams)
				drawElementsFactory.clickEventList = this.clickEventList
				this.drawElementsPageList = drawElementsFactory.createDrawElements().geteDrawElements()
				this.warpHeight =  `height:${this.drawElementsPageList.length * this.canvasHeight}px`
				this.drawTest()
				
			},
			drawTest(){
				for (var i = 0; i < this.drawElementsPageList.length; i++) {
					var context = uni.createCanvasContext('myCanvas' + i);
					
					for (var j = 0; j < this.drawElementsPageList[i].length; j++) {
						let item = this.drawElementsPageList[i][j]
						//设置画笔颜色
						if(item.type == 1){
							//方格
							context.save();
							context.setLineDash([0,0])
							context.setStrokeStyle(item.color);
							context.beginPath()
							context.rect(item.x, item.y, item.w, item.h);
							context.stroke()
							context.restore()
							
						}
						if(item.type == 2){
							context.save();
							context.beginPath()
							//拼音
							context.setFontSize(item.fontSize)
							context.setStrokeStyle(item.color);
							context.fillText(item.text,item.x, item.y, 50);
							context.stroke()
							context.restore()
							
							
						}
						if(item.type == 3){
							context.save();
							context.beginPath()
							//汉字
							context.setFontSize(item.fontSize)
							context.setFillStyle(item.color);
							context.fillText(item.text,item.x, item.y, 50);
							context.stroke()
							context.restore()
							
							
						}
						if(item.type == 4){
							//米格线、方格线
							context.save();
							context.setLineDash([item.lineDashWidth, item.lineDashPadWidth]);
							context.lineDashOffset = -50;
							context.setStrokeStyle(item.color);
							context.setLineWidth(0.2)
							context.beginPath()
							context.moveTo(item.lineX,item.lineY)
							context.lineTo(item.lineToX,item.lineToY)
							context.stroke()
							context.restore()
						}
					}
					//执行绘画的动作，如果没有执行stroke函数不会有任何的效果
					context.draw();
				}	

			
			}
		},
		onReady: function(e) {
			const system = uni.getSystemInfoSync()
			// this.a4w = 750 - 20
			// this.a4h = (297/210) * this.a4w
			// this.a4h = 'height:' + this.a4h + 'rpx'
		    this.windowWidth = system.windowWidth
			this.canvasWidth = system.windowWidth - 10 * 2
			this.canvasHeight = (842/595) * this.canvasWidth
			this.canvasHeightStype = 'height:' + this.canvasHeight + 'px'
			const drawPageParams = new DrawPageParams()
			this.color = "green"
			drawPageParams.boxColor = 'green'
			drawPageParams.boxType = 3
			drawPageParams.drawDataSource = DrawElementsSource.dataSource
			drawPageParams.canvasWidth = this.windowWidth - 20
			drawPageParams.canvasHeight = this.canvasHeight
			
			const drawElementsFactory = new DrawElementsFactory(drawPageParams)
			this.drawElementsPageList = drawElementsFactory.createDrawElements().geteDrawElements()
		    this.warpHeight =  `height:${this.drawElementsPageList.length * this.canvasHeight}px`
			this.drawTest()

			console.log("")  
				  
			
			
			
			
			
			
			

		}
	}
</script>

<style>
	body{
	   background-color:darkgrey;
	}
	
	#vc{
		
		width: auto;
		padding: 10px 10px 10px 10px;
	}
	 
	canvas{
	
	    border-radius: 1px;;
	    background-color: white;
		width: 100%;
		margin-top: 10px;
	
	}
	
</style>